<template>
	<div class="table-container">
		<el-table :data="tableData.tableConent" highlight-current-row border :cell-style="cellStyle" empty-text="未绑定技能分组">
			<el-table-column :label="item.label" v-for="(item, index) in tableData.tableHead" :property="item.prop" :key="index" align="center">
				<template slot-scope="scope">
					<div v-if="item.prop === 'name'">
						<p class="error">{{ scope.row.name.isRepeats && !scope.row.name.isEmpty ? ' *请勿重复添加技能分组!' : '' }}</p>
						<p class="error">{{ scope.row.name.isEmpty ? ' *请选择一个技能组!' : '' }}</p>
						<span v-if="scope.row.name.isSet && !tableData.isEdit">
							<el-select
								v-model="scope.row.name.value"
								placeholder="请选择"
								@change="changeSkillName(scope.row)"
								:class="scope.row.name.isEmpty || scope.row.name.isRepeats ? 'error-border' : 'input-border'"
							>
								<el-option v-for="item in tableData.options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
							</el-select>
						</span>
						<p v-else>{{ scope.row.name.label }}</p>
					</div>
					<div v-if="item.prop === 'weight'">
						<p class="error">{{ scope.row.weight.invalid ? ' *请输入1~99的数字！' : '' }}</p>
						<span v-if="scope.row.weight.isSet && !tableData.isEdit">
							<el-input
								type="number"
								v-model="scope.row.weight.value"
								@focus="weightFocus(scope.row)"
								:class="scope.row.weight.invalid ? 'input-error-border' : 'input-border'"
							></el-input>
						</span>
						<p class="edit-class" v-else>{{ scope.row.weight.value }}</p>
					</div>
					<div v-if="item.prop === 'groupPriority'">
						<p class="error">{{ scope.row.groupPriority.invalid ? ' *请输入1~99的数字！' : '' }}</p>
						<span v-if="scope.row.groupPriority.isSet && !tableData.isEdit">
							<el-input
								type="number"
								v-model="scope.row.groupPriority.value"
								@focus="groupPriorityFocus(scope.row)"
								:class="scope.row.groupPriority.invalid ? 'input-error-border' : 'input-border'"
							>
							</el-input>
						</span>
						<p class="edit-class" v-else>{{ scope.row.groupPriority.value }}</p>
					</div>
					<div v-if="item.prop === 'isChief'" class="isChief">
						<p class="error"></p>
						<span v-if="scope.row.isChief.isSet && !tableData.isEdit">
							<el-radio v-model="scope.row.isChief.value" :label="true">是</el-radio>
							<el-radio v-model="scope.row.isChief.value" :label="false">否</el-radio>
						</span>
						<p v-else>{{ scope.row.isChief.value ? '是' : '否' }}</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column v-if="tableData.tableConent.length > 0 && !tableData.isEdit" width="80">
				<template slot-scope="scope">
					<p class="error"></p>
					<div class="btn">
						<img class="del" v-show="tableData.tableConent.length > 1" @click="removeGroup(scope)" src="@/assets/img/icon/del_group.png" />
						<img
							class="add"
							v-show="scope.$index === tableData.tableConent.length - 1 && tableData.tableConent.length < 10"
							@click="addGroup(scope)"
							src="@/assets/img/icon/add_group.png"
						/>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	props: {
		tableData: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			groupWeightError: '',
			concurrencyWeightError: '',
			submitStatus: true,
			cellStyle: {
				height: '70px',
				padding: 0
			}
		};
	},
	created() {},
	mounted() {},
	methods: {
		// 选择技能组
		changeSkillName(row) {
			row.name.label = this.tableData.options.filter(item => item.id === row.name.value)[0].name;
			row.name.isEmpty = false;
			row.name.isRepeats = false;
			this.$emit('changeSkillName', this.submitStatus);
		},
		// 单元格点击
		cellClick() {},
		// 增加分组
		addGroup(scope) {
			this.$emit('addGroup', scope);
		},
		// 移除分组
		removeGroup(scope) {
			this.$emit('removeGroup', scope);
		},
		weightFocus(row) {
			row.weight.invalid = false;
		},
		groupPriorityFocus(row) {
			row.groupPriority.invalid = false;
		}
	}
};
</script>

<style lang="less">
.table-container {
	.el-table thead {
		color: #676a6c;
		tr {
			th {
				background-color: #f8f8f9;
			}
		}
	}

	.el-table {
		.el-input__prefix {
			height: 32px;
		}
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			appearance: none;
			margin: 0;
		}
		.el-input__inner {
			line-height: 32px;
			height: 32px;
		}
		input {
			height: 30px;
			border: 0;
		}
		.el-input__icon {
			line-height: 34px;
		}
		.el-table__body-wrapper {
			.cell {
				position: relative;
				line-height: 70px;
			}
		}
	}
}
</style>

<style lang="less" scoped>
.table-container {
	.edit-class {
		cursor: pointer;
	}
	.btn {
		display: flex;
		justify-content: space-around;
	}
	.error {
		color: red;
		font-size: 12px;
		position: absolute;
		top: -24px;
		left: 10px;
		z-index: 10;
		height: 20px;
	}
	.el-select {
		height: 34px;
		line-height: 32px;
	}
	.error-border {
		margin-top: 4px;
		border: 1px solid red;
		border-radius: 4px;
	}
	.input-border {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		height: 36px;
		line-height: 34px;
	}
	.input-error-border {
		margin-top: 4px;
		border: 1px solid red;
		border-radius: 4px;
		height: 36px;
		line-height: 34px;
	}
	.isChief {
		white-space: nowrap;
		overflow-y: auto;
	}
}
</style>
